<template>
  <el-card class="box-card"  style="height: 100%;overflow: scroll">
    <div style="margin-top: 3%;">
      <el-input placeholder="请输入内容"  size="large" v-model="input" class="input-with-select" style="width: 30%">

        <el-select v-model="value" slot="prepend" placeholder="请选择类型" style="width: 130px;">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" v-on:click="getDetail()"></el-button>
      </el-input>
    </div>
    <el-card class="b-main">
      <h2 v-if="is_show===0">输入信息跟踪行为</h2>
      <div v-else class="block" style="margin-top: 5%;">
        <el-timeline v-if="behavior.length>0">
          <el-timeline-item  v-for="(b,i) in behavior" :key="i" :timestamp="b.time" placement="top" >
            <el-card>
              <div class="b-h"><h3 style="float: left"><el-tag size="medium">ACTOR&nbsp&nbsp:</el-tag> {{b.actor}}</h3></div>
              <el-divider></el-divider>
              <div class="b-h">
                <div class="b-h-d" style="margin-left: 0%"><h3><el-tag size="medium">&nbsp&nbspVERB&nbsp&nbsp&nbsp:</el-tag> {{b.verb.verbName}}</h3></div>
                <div class="b-h-d"><h3><el-tag size="medium" style="font-size: medium">描述:</el-tag></h3></div>
                <el-checkbox-group v-model="b.verb.describeKeys" class="b-h-d" size="small" style="margin-left: 1%">
                  <el-checkbox-button  v-for="(value,key,index) in b.verb.describe" :key="index" :label="key" @change="changeDescribeValue(i,key,value)">{{key}}</el-checkbox-button>
                </el-checkbox-group>
                <div class="b-h-d"><h3>{{b.verb.describeValue}}</h3></div>
              </div>
              <el-divider></el-divider>
              <div class="b-h">
                <div class="b-h-d" style="margin-left: 0%"><h3><el-tag size="medium">OBJECT&nbsp:</el-tag></h3></div>
                <el-checkbox-group v-model="b.object.nameKeys" class="b-h-d" size="small" style="margin-left: 1%">
                  <el-checkbox-button  v-for="(value,key,index) in b.object.name" :key="index" :label="key" @change="changeActivityNameValue(i,key,value)">{{key}}</el-checkbox-button>
                </el-checkbox-group>
                <div class="b-h-d" style="width: 10%;"><h3 style="float: left"> {{b.object.nameValue}}</h3></div>
                <div class="b-h-d"><h3><el-tag size="medium" style="font-size: medium">类型:</el-tag>{{b.object.type}}</h3></div>
                <div class="b-h-d"><h3><el-tag size="medium" style="font-size: medium">描述:</el-tag>{{b.object.detail}}</h3></div>
              </div>
            </el-card>
          </el-timeline-item>
          <el-button  v-on:click="getData()">加载更多</el-button>
        </el-timeline>
        <h2 v-else >暂无数据</h2>
      </div>
    </el-card>

  </el-card>
</template>
<script>
  export default {
    mounted: function () {

    },
    data() {
      return {
        input: '',
        options: [{
          value: '1',
          label: 'LRS用户账号'
        }],
        value: '',
        num:0,
        is_show:0,
        behavior:[{
          time:'',
          actor:'',
          verb:{
            verbName:'',
            describeKeys:[],
            describeValue:'',
            describe:{}
          },
          object:{
            nameKeys:[],
            nameValue:'',
            name:{},
            type:'',
            detail:''
          }
        }]

      }
    },
    methods: {
      getDetail () {
        if (this.input===''||this.value===''){
          this.$message.error('请输入搜索内容并选择搜索类型');
        }else{
          this.is_show=1
          if(this.value==='1'){
            this.getData()
          }
        }
      },
      changeDescribeValue(index,key,value){
        this.behavior[index].verb.describeKeys=key
        console.log(this.behavior[index].verb.describeKeys)
        this.behavior[index].verb.describeValue=value
      },
      changeActivityNameValue(index,key,value){
        this.behavior[index].object.nameKeys=key
        console.log(this.behavior[index].verb.describeKeys)
        this.behavior[index].object.nameValue=value
      },
      getData(){
        this.$axios.get("/behavior/trace", {
          params: {
            num: this.num,
            agentOpenid:this.input
          }
        }).then(successResponse => {
          if (this.num===0){
            this.behavior=successResponse.data
          }else {
            this.behavior=this.behavior.concat(successResponse.data)
          }
          console.log(this.behavior)
          this.num+=10
        }).catch(failResponse => {
        })
      }
    }
  }
</script>
<style>
  .box-card{
    background-color: aliceblue;
    height: auto;
  }
  .b-main{
    margin-top: 5%;
    width: 80%;
    margin-left: 10%;
    height: auto;
  }
  .b-h{
    margin-top: 1%;
    height: 25px;

  }
  .b-h-d{
    float: left;
    margin-left: 3%;
  }
</style>

